<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--元素操作按钮-->
    <ul id="items">
        <li>1111</li>
    </ul>
    <button id="by-static-btn" type="button">静态获取元素</button>
    <button id="by-dynamic-btn" type="button">动态获取元素</button>
    <button id="append-btn" type="button">追加一个子元素</button>
    <button id="insert-btn" type="button">在头部插入一个子元素</button>
    <button id="delete-btn" type="button">删除最后一个子元素</button>
    <button id="parent-node-btn" type="button">获取父元素</button>
    <button id="child-node-btn" type="button">获取子元素</button>
</head>
<body>
<script>
    onload = () => {

        /*抓取DOM元素*/
        let items = document.querySelector('#items');

        // 静态获取元素: lis.length 只获取一次
        document.querySelector('#by-static-btn').onclick = () => {
            let lis = items.querySelectorAll('li');
            items.innerHTML += `<li>2222</li>`;
            console.log('length: ' + lis.length);
            items.innerHTML += `<li>3333</li>`;
            console.log('length: ' + lis.length);
            items.innerHTML += `<li>4444</li>`;
            console.log('length: ' + lis.length);
        };

        // 动态获取元素: lis.length 每次都重新获取
        document.querySelector('#by-dynamic-btn').onclick = () => {
            let items = document.getElementById('items');
            let lis = items.getElementsByTagName('li');
            items.innerHTML += `<li>5555</li>`;
            console.log('length: ' + lis.length);
            items.innerHTML += `<li>6666</li>`;
            console.log('length: ' + lis.length);
            items.innerHTML += `<li>7777</li>`;
            console.log('length: ' + lis.length);
        };

        // 追加子元素
        document.querySelector('#append-btn').onclick = () => {

            // 若子元素不存在则表示追加
            let newLi = document.createElement('li');
            newLi.innerText = '8888';
            // 在items中追加一个新的li标签
            items.appendChild(newLi);

            // 若子元素本身存在则表示移动到末尾
            let firstLi = document.querySelector('#items li:first-child');
            items.appendChild(firstLi);
        };

        // 在items列表的头部插入一个 `<li>0</li>`
        document.querySelector('#insert-btn').onclick = () => {
            let newLi = document.createElement('li');
            newLi.innerText = '0000';
            items.insertBefore(newLi, items.querySelectorAll('li')[0]);
        };

        // 删除items列表的尾部元素
        document.querySelector('#delete-btn').onclick = () => {
            let lastLi = document.querySelector('#items li:last-child');
            items.removeChild(lastLi);
        };

        // 获取items的父元素
        document.querySelector('#parent-node-btn').onclick = () => {
            console.log(items.parentNode);
        };

        // 获取items的子节点
        document.querySelector('#child-node-btn').onclick = () => {

            // 获取items的子节点，包括文本元素
            console.log('childNodes', items.childNodes);

            // 获取items的子节点，不包括文本元素
            console.log('children', items.children);
        };
    };
</script>

</body>
</html>